<template>
	<div class="main">
		<el-card shadow="never" class="card">
			<div slot="header" class="clearfix">
				<span>条件查询</span>
					
			</div>
			<!-- 查询表单 -->
			<el-form ref="form" :model="form" label-width="80px" size="small" :inline='true'>
			<el-form-item label="订单编号">
				<el-input v-model="form.orderSn"></el-input>
			</el-form-item>
			<el-form-item label="退单状态">
				<el-select v-model="form.status" placeholder="订单状态">
					<el-option label="待处理" :value="0"></el-option>
					<el-option label="退货中" :value="1"></el-option>
					<el-option label="已完成" :value="2"></el-option>
					<el-option label="已拒绝" :value="3"></el-option>
					
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button type="primary"  @click="search" >查询</el-button>
				<el-button type="primary" @click="empty">重置</el-button>
					
			</el-form-item>
			</el-form>
			</el-card>
			<!-- 表单区 -->
			<el-card shadow="never" class="card">
				<el-table :data="tableData" border style="width: 100%">
					<el-table-column fixed type="index" align="center" width="50" label="序号">
					</el-table-column>
					<el-table-column prop="orderSn" label="订单编号" align="center" width="200">
					</el-table-column>
				
					
					<el-table-column label="退单状态" width="120">
						<template slot-scope="scope">
							<span>{{scope.row.status == 0? '待处理':''||scope.row.status == 1? '退货中':''||scope.row.status == 2? '已完成':''||scope.row.status == 3? '已拒绝':''}}</span>
						</template>
					</el-table-column>
					<el-table-column prop="description" label="描述" align="center" width="200">
					</el-table-column>
					<el-table-column prop="reason" label="退单原因" align="center" width="200">
					</el-table-column>
					<el-table-column prop="productName" label="商品名称" align="center" width="200">
					</el-table-column>
					<el-table-column prop="productAttr" label="商品属性" align="center" width="200">
					</el-table-column>
					<el-table-column prop="handleNote" label="商家备注" align="center" width="200">
					</el-table-column>
					<el-table-column label="添加时间" align="center" width="220">
						<template slot-scope="scope">
							<div>{{scope.row.createTime}}</div>
						
						</template>
					</el-table-column>
					
					
					
					<el-table-column fixed="right" label="操作" width="100">
						<template slot-scope="scope">
							<el-button type="primary" size="mini" icon="el-icon-view" @click="returnOrder(scope.row.id)">查看订单</el-button>
							
						</template>
					</el-table-column>
				</el-table>
				<!-- 分页 -->
				<div class="block">
				
					<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
						:current-page="page.currentpage" :page-sizes="page.pageSizes" :page-size="page.pageSize"
						layout="total, sizes, prev, pager, next, jumper" :total="page.total">
					</el-pagination>
				</div>
				</el-card>
	</div>
</template>

<script>
	import{
		findReturnApply
	}from "@/api/order/back/index.js"
	export default{
		data(){
			return{
				arr:[],
				searchForm: {},
				form:{
					orderSn:"",
					status:""
				},
				tableData:[],
				// 分页对象
				page: {
					currentpage: 1,
					pageSizes: [10, 15, 20, 25],
					pageSize: 10,
					total: 0
				}
			}
		},
		methods:{
			// 查看订单
			returnOrder(id){
				this.$router.push({name:"Detail",params:{id}})
			},
			// 点击查询
			search() {
				// console.log(this.form)
				this.getBackList()
				// 分页初始化
				 this.page = this.$options.data().page
				// 遍历表单把需要查询的数据放到searchForm里
			 	
			 	for (const key in this.form) {
			
			
					this.searchForm[key] = this.form[key]
			
			 	}
			},
			// 分页
			handleSizeChange(val) {
				this.page.pageSize = val
				this.getBackList()
			},
			handleCurrentChange(val) {
				this.page.currentpage = val
				this.getBackList()
			},
			// 重置
			empty(){
				this.form = this.$options.data().form
			},
			// 获取退单列表
			getBackList(){
				var _this = this;
				findReturnApply(this.page.currentpage, this.page.pageSize,this.searchForm).then(res=>{
					console.log(res)
					this.tableData = res.data.rows
					res.data.rows.forEach(ele=>{
						return _this.arr.push(ele.productAttr) 
					})
					this.page.total = res.data.total
					
				})
			}
		},
		created() {
			this.getBackList()
		}
	}
</script>

<style scoped="scoped" lang="scss">
</style>
